<template>
  <div class="v-charts" ref="chartRef"></div>
</template>

<script setup>
import { useCharts } from './useCharts'
import { onMounted, watch, shallowRef, toRefs } from 'vue'

defineOptions({
  name: 'vCharts'
})

const props = defineProps({
  type: {
    type: String,
    default: 'bar'
  },
  options: {
    type: Object,
    default: () => ({})
  },
  mapData: {
    type: Object,
    default: () => ({})
  }
})

const { type, options, mapData } = toRefs(props)
const chartRef = shallowRef()

const { charts, setOptions, initChart } = useCharts({ type, el: chartRef, mapData })

onMounted(async () => {
  await initChart()
  setOptions(options.value)
})

watch(
  options,
  () => {
    setOptions(options.value)
  },
  {
    deep: true
  }
)

defineExpose({
  $charts: charts
})
</script>

<style lang="scss" scoped>
.v-charts {
  width: 100%;
  height: 100%;
  min-height: 120px;
}
</style>